<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<div class="panel admin-panel" id="userListDiv">
    <div class="panel-head"><strong class="icon-reorder"> 问卷列表</strong> <a href="" style="float:right; display:none;">添加字段</a>
    </div>
    <div class="padding border-bottom">
        <form>
            <ul class="search" style="padding-left:10px;">
                <li>
                    <input type="text" placeholder="请输入搜索关键字" name="keyword" class="input"
                           style="width:250px; line-height:17px;display:inline-block" v-model="keyword"/>
                    <a class="button border-main icon-search" @click="findList()"> 搜索</a></li>
            </ul>
        </form>
    </div>
    <table class="table table-hover text-center">
        <tr>
            <th>序号</th>
            <th>封面</th>
            <th width="10%">问卷名称</th>
            <th>级别</th>
            <th width="10%">星级</th>
            <th width="310">操作</th>
        </tr>

        <tr v-for="(userInfoVo,index) in userInfoVoList">
            <td>{{index+1}}</td>
            <td width="10%"><img :src="userInfoVo.cover" alt="" width="70" height="50"/></td>
            <td><a class="button border-main" :href="'/soul_question.html?id='+userInfoVo.id"> {{userInfoVo.name}} </a>
            </td>
            <td>{{userInfoVo.level}}</td>
            <td>{{userInfoVo.star}}</td>
            <td><a class="button border-main" :href="'/soul_question.html?id='+userInfoVo.id"> 编辑 </a></td>
            <!--<td>-->
            <!--<div class="button-group">-->
            <!--<a class="button border-main" @click="findUserMap(userInfoVo.userLocationVo)"></span>地理位置</a>-->
            <!--</div>-->
            <!--</td>-->
        </tr>
        <tr>
            <td colspan="8">
                <div class="pagelist">
                    <a @click="pageNum=1" v-if="pageNum>1">首页</a>
                    <a @click="pageNum--" v-if="pageNum>1">上一页</a>

                    <a href="javascript:" v-for="(page,index) in pageBeanVo.pages"
                       :class="pageNum==page ? 'current':''"
                       @click="pageNum=page"
                    >{{page}}</a>

                    <a @click="pageNum++" v-if="pageNum<pageBeanVo.pages">下一页</a>
                    <a @click="pageNum=pageBeanVo.pages" v-if="pageNum<pageBeanVo.pages">末页</a>
                </div>
            </td>
        </tr>

    </table>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: '#userListDiv',
        data: {
            "keyword": "",
            "userInfoVoList": [],
            "userInfoVoIdArr": [],
            "pageNum": 1,
            "pageSize": 10,
            "pageBeanVo": {},
            "userInfoVo": {},
            "userLocationVo": {}

        },
        methods: {
            findList() {
                axios.get("/movies/findByPage", {
                    params: {
                        "keyword": this.keyword,
                        "pageNum": this.pageNum,
                        "pageSize": this.pageSize,
                    }
                }).then(resp => {
                    this.pageBeanVo = resp.data;
                    this.userInfoVoList = resp.data.items;
                    console.log(this.userInfoVoList);
                })
            },
            findUserMap(userLocationVo) {
                var longitude = userLocationVo.longitude;
                var latitude = userLocationVo.latitude;
                location.href = "/map.html?longitude=" + longitude + "&latitude=" + latitude;
            }
        },
        watch: {
            pageNum() {
                this.findList();
            },
        },
        created() {
            this.findList();
        }
    })

</script>
</body>
</html>